<template>
  <div>
    <el-tag
      class="category-tag"
      closable
      effect="plain"
      v-for="tag in tagList"
      :key="getCurId(tag)"
      :disable-transitions="false"
      @close="() => handleRemoveTag(tag)"
    >
      <span class="tag-text">{{getCurPath(tag)}} {{getCurCode(tag)}}</span>
    </el-tag>
  </div>
</template>
<script>
import {
  getCode,
  getPath,
  getId,
} from '../constants';
export default {
  props: {
    dataSource: {
      type: Array,
      default: () => []
    },
  },
  computed: {
    tagList () {
      return [...this.dataSource]
    },
  },
  methods: {
    // 移除标签
    handleRemoveTag (tag) {
      const updateList = this.dataSource.filter(item => getId(item) !== getId(tag))
      const uuidList = updateList.map(item => getId(item))
      this.$emit('remove', tag)
      this.$emit('update', uuidList)
    },
    // 获取品类编码
    getCurCode (item) {
      return getCode(item)
    },
    // 获取品类路径
    getCurPath (item) {
      return getPath(item)
    },
    // 获取品类uuid
    getCurId (item) {
      return getId(item)
    },
  }
}
</script>
<style lang="less" scoped>
.category-tag {
  margin: 5px 0;
  .tag-text {
    display: inline-block;
    width: 440px;
  }
}
</style>
